import React, { useRef, useCallback, useState, useEffect } from 'react'
import './style.scss'
import { Button, Icon } from 'bee-mobile'
import { connect } from 'react-redux'
import { homeAction } from '@/store/actions'
import { useOnEnter } from '@/hooks'

const mapStateToProps = state => {
	return {
		...state.homeReducer
	}
}
const mapDispatchToProps = dispatch => {
	return {
		counterAdd: () => {
			dispatch(homeAction(2))
		}
	}
}
function Child ({ callback }) {
	const [ count, setCount ] = useState(() => callback())
	useEffect(() => {
		setCount(callback())
	}, [callback])
	return (
		<div>{count}</div>
	)
}
function IndexPage (props) {
	const { count, counterAdd } = props
	const [ val, setVal ] = useState(0)
	const divRef = useRef(null)
	useOnEnter(() => {

	})
	const callback = useCallback(() => {
		return val
	}, [val])
	return (
		<div className='home-container'>
			首页
			<Button theme="primary" onClick={counterAdd}>计数</Button>
			<Icon onClick={() => {setVal(val + 1)}} icon='home' size='2x' />
			<div ref={divRef}>{count}</div>
			<div>{val}</div>
			<Child callback={callback} />
		</div>
	)
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(IndexPage)